@page "/maps/cyber-attack-map"

@using Syncfusion.Blazor.Maps

@inherits SampleBaseComponent;

@* <SampleDescription>
    <p> This sample depicts the layers along with sublayers. Countries in the African and Australian continents are rendered in the sublayers.</p>
</SampleDescription>
<ActionDescription>
   <p> In this example, you can see how to render a sublayer in map. Sublayers are used to render the desired shapes over the existing layers. Any number of sublayers can be added to a map. You can use the <code><a target='_blank' class='code' href=''>fill</a></code>, <code><a target='_blank' class='code' href=''>width</a></code>, and <code><a target='_blank' class='code' href=''>color</a></code> properties in the border to customize the appearance of the shapes.</p>
</ActionDescription> *@

<!-- <div class="control-section">
    <SfMaps ModelType="@typeof(IDataTemplate)">
        <MapsTitleSettings Text="Cyber Attack Map of United States">
            <MapsTitleTextStyle Size="16px"></MapsTitleTextStyle>
        </MapsTitleSettings>
        <MapsLayers>
            <MapsLayer ShapeData="@MapShapeData">
                <MapsShapeSettings Fill="#FFFFE0">
                    <MapsShapeBorder Color="#D2691E" Width="0.2"></MapsShapeBorder>
                </MapsShapeSettings>
                <MapsMarkerSettings>
                    <MapsMarker Visible="@visibles" AnimationDuration="0" DataSource="usaMarker">
                        <MarkerTemplate>
                            @{
                                var data = context as IDataTemplate;
                                <div class="parent_css">
                                    <br />
                                    <div class="name" style="margin-left:-15px;margin-top:-10px">@data.Name</div>
                                </div>
                            }
                        </MarkerTemplate>
                    </MapsMarker>
                    <MapsMarker Visible="@visible" AnimationDuration="0" DataSource="cyberAttackMarker">
                        <MarkerTemplate>
                            @{
                                var data = context as IDataTemplate;
                                <div class="pulse-css" style="margin-left:-5px;margin-top:-10px;display: @display"><br />
                                    <div class="name" style="margin-left:-15px;margin-top:0px; display: @display">@data.Name</div>
                                </div>
                             }
                            </MarkerTemplate>
                    </MapsMarker>

                </MapsMarkerSettings>
                <MapsNavigationLines>
                    <MapsNavigationLine DashArray="new int[] { 5,1 }" Visible="true" Angle="-0.3" Color="#ffffb3" Latitude="new double[] { 15.758401, 39.864171 }" Longitude="new double[] { 101.155642, -100.854833 }"></MapsNavigationLine>
                    <MapsNavigationLine DashArray="new int[] { 5,1 }" Visible="true" Angle="-0.4" Color="#ffffb3" Latitude="new double[] { 57.725612, 39.864171 }" Longitude="new double[] { -101.802160, -100.854833 }"></MapsNavigationLine>
                    <MapsNavigationLine DashArray="new int[] { 5,1 }" Visible="true" Angle="-0.2" Color="#ffffb3" Latitude="new double[] { 39.634177, 39.864171 }" Longitude="new double[] { 42.410740, -100.854833 }"></MapsNavigationLine>
                    <MapsNavigationLine DashArray="new int[] { 5,1 }" Visible="true" Angle="-0.1" Color="#ffffb3" Latitude="new double[] { 22.860388, 39.864171 }" Longitude="new double[] { 79.739066, -100.854833 }"></MapsNavigationLine>
                    <MapsNavigationLine DashArray="new int[] { 5,1 }" Visible="true" Angle="-0.1" Color="#ffffb3" Latitude="new double[] { -24.763753, 39.864171 }" Longitude="new double[] { 134.852191, -100.854833 }"></MapsNavigationLine>
                    <MapsNavigationLine DashArray="new int[] { 5,1 }" Visible="true" Angle="-0.4" Color="#ffffb3" Latitude="new double[] { 34.611098, 39.864171 }" Longitude="new double[] { 104.189872, -100.854833 }"></MapsNavigationLine>
                    <MapsNavigationLine DashArray="new int[] { 5,1 }" Visible="true" Angle="-0.8" Color="#ffffb3" Latitude="new double[] { -12.354844, 39.864171 }" Longitude="new double[] { -49.017709, -100.854833 }"></MapsNavigationLine>
                    <MapsNavigationLine DashArray="new int[] { 5,1 }" Visible="true" Angle="-0.4" Color="#ffffb3" Latitude="new double[] { 3.450682, 39.864171 }" Longitude="new double[] { -72.943141, -100.854833 }"></MapsNavigationLine>
                    <MapsNavigationLine DashArray="new int[] { 5,1 }" Visible="true" Angle="-0.7" Color="#ffffb3" Latitude="new double[] { 62.448268, 39.864171 }" Longitude="new double[] { 97.251835, -100.854833 }"></MapsNavigationLine>
                    <MapsNavigationLine DashArray="new int[] { 5,1 }" Visible="true" Angle="-0.3" Color="#ffffb3" Latitude="new double[] { 65.931163, 39.864171 }" Longitude="new double[] { -45.812820, -100.854833 }"></MapsNavigationLine>
                    <MapsNavigationLine DashArray="new int[] { 5,1 }" Visible="true" Angle="-0.2" Color="#ffffb3" Latitude="new double[] { -21.206222, 39.864171 }" Longitude="new double[] { 17.122018, -100.854833 }"></MapsNavigationLine>
                    <MapsNavigationLine DashArray="new int[] { 5,1 }" Visible="true" Angle="-0.2" Color="#ffffb3" Latitude="new double[] { 35.839969, 39.864171 }" Longitude="new double[] { 137.904641, -100.854833 }"></MapsNavigationLine>
                    <MapsNavigationLine DashArray="new int[] { 5,1 }" Visible="true" Angle="-0.2" Color="#ffffb3" Latitude="new double[] { 46.582184, 39.864171 }" Longitude="new double[] { 2.232903, -100.854833 }"></MapsNavigationLine>
                    <MapsNavigationLine DashArray="new int[] { 5,1 }" Visible="true" Angle="-0.2" Color="#ffffb3" Latitude="new double[] { 0.390617, 39.864171 }" Longitude="new double[] { 37.893734, -100.854833 }"></MapsNavigationLine>
                </MapsNavigationLines>
            </MapsLayer>
        </MapsLayers>
    </SfMaps>
</div>

<button @onclick="@click">Click Me</button>
<style>
    .name {
        margin-top: -6px;
        margin-left: -6px;
        font-size: 12px;
        color: black;
        text-shadow: 0px 1px 1px lightgray;
        font-weight: 500
    }
     .parent_css {
        width: 13px;
        height: 13px;
        background: #D2691E;
        position: relative;
        animation-delay: 5s;
    }

    .parent_css:before,
    .parent_css:after {
        content: '';
        width: 9px;
        height: 9px;
        background-color: #D2691E;
        position: absolute;
        top: 0;
        right: 0;
        display:none;
        bottom: 0;
        left: 0;
        margin: auto;
        transform: scale(0.5);
        animation: pulse-css1 3s linear infinite;
    }
        .pulse-css {
        width: 12px;
        height: 12px;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        border-radius: 10px;
        background: #D2691E;
        position: relative;
        animation-delay: 5s;
    }

    .pulse-css:before,
    .pulse-css:after {
        content: '';
        width: 9px;
        height: 9px;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        border-radius: 10px;
        background-color: #D2691E;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        margin: auto;
        transform: scale(0.5);
        animation: pulse-css1 2s linear infinite;
    }
</style>
@code {
   
    System.Timers.Timer syncTimer1 = null;
    public string display = "block";
    public Boolean visible = true;
    public Boolean visibles = true;
    public void click() {
        visible = false;
    }
    protected override void OnInitialized()
    {
        syncTimer1 = new System.Timers.Timer(1000);
        syncTimer1.Elapsed += this.pointerValueUpdate;
        syncTimer1.AutoReset = true;
        syncTimer1.Enabled = true;
    }
    Random Random = new Random();
    void pointerValueUpdate(Object source, System.Timers.ElapsedEventArgs e)
    {
        display = "none";
        visible = false;
        visibles = true;
    }
    public class CyberMarker
    {
        public double latitude;
        public double longitude;
        public string name;
    };
    public class MapDataSettings
    {
        public Boolean async { get; set; }
        public String dataOptions { get; set; }
        public String type { get; set; }
    };
    public MapDataSettings MapShapeData = new MapDataSettings
    {
        async = true,
        dataOptions = "scripts/MapsData/WorldMap.json",
        type = "GET"
    };
    public List<CyberMarker> usaMarker = new List<CyberMarker> {
            new CyberMarker { latitude= 39.864171, longitude= -100.854833, name= "United States" },
    };
    public List<CyberMarker> cyberAttackMarker = new List<CyberMarker> {
            new CyberMarker { latitude= 15.758401, longitude= 101.155642, name= "Thailand" },
            new CyberMarker { latitude= 57.725612, longitude= -101.802160, name= "Canada" },
            new CyberMarker { latitude= 39.634177, longitude= 42.410740, name= "Turkey" },
            new CyberMarker { latitude= 22.860388, longitude= 79.739066, name= "India" },
            new CyberMarker { latitude= -24.763753, longitude= 134.852191, name= "Australia" },
            new CyberMarker { latitude= 34.611098, longitude= 104.189872, name= "China" },
            new CyberMarker { latitude= -12.354844, longitude= -49.017709, name= "Brazil" },
            new CyberMarker { latitude= 3.450682, longitude= -72.943141, name= "Colombia" },
            new CyberMarker { latitude= 62.448268, longitude= 97.251835, name= "Russia" },
            new CyberMarker { latitude= 65.931163, longitude= -45.812820, name= "Greenland" },
            new CyberMarker { latitude= -21.206222, longitude= 17.122018, name= "Namibia" },
            new CyberMarker { latitude= 35.839969, longitude= 137.904641, name= "Japan" },
            new CyberMarker { latitude= 46.582184, longitude= 2.232903, name= "France" },
            new CyberMarker { latitude= 0.390617, longitude= 37.893734, name= "Kenya" }
    };

} -->